<template>
  <div>
    <h1>ToDoList</h1>
    <to-do-input @add="addNewTask"></to-do-input>
    <to-do-list :list="tasklist" class="mt-2"></to-do-list>
    <to-do-button v-model:active="activeBtnIndex"></to-do-button>
  </div>
</template>

<script>
// 导入组件
import ToDoList from './components/list/list.vue'
import ToDoInput from './components/input/input.vue'
import ToDoButton from './components/button/button.vue'

export default {
  name: 'APP',
  data () {
    return {
      // 任务列表的数据
      todolist: [
        { id: 1, task: '周一早晨9点开会', done: false },
        { id: 2, task: '周一晚上8点聚餐', done: false },
        { id: 3, task: '准备周三上午的演讲稿', done: true },
      ],
      // 下一个可用的 Id 值
      nextId: 4,
      // 激活的按钮的索引
      activeBtnIndex: 0
    }
  },
  computed: {
    tasklist () {
      switch (this.activeBtnIndex) {
        case 0:
          return this.todolist
        case 1:
          return this.todolist.filter(x => x.done === true)
        case 2:
          return this.todolist.filter(x => x.done !== true)
      }
    }
  },
  components: {
    ToDoList,
    ToDoInput,
    ToDoButton
  },
  methods: {
    addNewTask (taskname) {
      // 1. 向任务列表中新增任务信息
      this.todolist.push({
        id: this.nextId,
        task: taskname,
        done: false
      })
      // 2. 让 nextId 自增+1
      this.nextId++
    }
  }
}
</script>

<style lang='less' scoped>
</style>